import React, {Component} from 'react';
import axios from "axios";
import BetterScroll from 'better-scroll'

class Cinema extends Component {
    ref = React.createRef()
    constructor() {
        super();

        this.state={
            cinemaList:[],
            newCinemaList:[]
        }

        //请求数据 axios第三方库
        // axios.get("https://m.maizuo.com/gateway?cityId=440600&ticketFlag=1&k=7560596").then(res => {
        //     console.log(res)
        // }).catch((err) => {
        //     console.log(err)
        // })

        axios({
            url: "https://m.maizuo.com/gateway?cityId=440600&ticketFlag=1&k=7560596",
            method:'get',
            headers: {
                'X-Client-Info': ' {"a":"3000","ch":"1002","v":"5.2.1","e":"17079850121452910126825473","bc":"440600"}',
                'X-Host': 'mall.film-ticket.cinema.list'
            }
        }).then(res => {
            console.log(res)
            this.setState({
                cinemaList:res.data.data.cinemas,
                newCinemaList:res.data.data.cinemas
            },()=>{
                new BetterScroll('.wrapper')
            })
        }).catch((err) => {

            }
        )
    }

    //后面生命周期更适合发生ajax
    render() {
        return (
            <div>
                <input type="text" ref={this.ref} onInput={()=>{this.getInput(this.ref)}}/>
                <div className="wrapper" style={{height: '500px', background: 'yellow', overflow: 'hidden'}}>
                    <div className="content">
                        {
                            this.state.cinemaList.map(item=>
                                <dl key={item.cinemaId}>
                                    <dt>{item.name}</dt>
                                    <dd>{item.address}</dd>

                                </dl>
                            )
                        }
                    </div>
                </div>


            </div>
        );
    }

    getInput(val){
        console.log(val.current.value)
        let arr=this.state.newCinemaList

        let newarr=arr.filter(item=>
            item.name.toUpperCase().includes(val.current.value.toUpperCase())
            ||
            item.address.toUpperCase().includes(val.current.value.toUpperCase())
        )
        // cinemaList被覆盖
        this.setState({
            cinemaList:newarr
        },()=>{

        })
    }
}

export default Cinema;
